import { formList, formRemove } from "@/services/formInteraction";
import { Button, Icon, Input, Modal, Table, message } from "antd";
import React from "react";
import styles from "./index.less"
import moment from "moment";
import CreateModal from "./createModal";
import UserSession from "@/UserSession";

class FormInteraction extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      queryData:{
        current:1,
        size:10,
        search:"",
      },
      loading:false,
      total:0,
      list:[]
    }
  }

  componentDidMount(){
    this.getList()
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { queryData } = this.state;
      // const res = await formList(queryData)
      this.setState({
        list:[
          {
            name:"数据表",
            desc:"---",
            createUser:"aaaa",
            createTime:"2022-02-22 12:22:00",
            id:"1"
          }
        ],
        loading:false,
        total:1
      })
    })
  }

  openCreateModal = row => {
    this.CreateModal.initModal(row)
  }

  toEditPage = () => {
    const { history } = this.props;
    const currentUser = UserSession.getCurrentUser()
    history.push({
			pathname: currentUser.tenantId != '1' ? '/languageModel/edit/' + row.id :"/llmCenter/languageModel/edit/" + row.id,
			params: {},
		});
  }

  removeConfirm = id => {
    Modal.confirm({
      title:"确认删除该表单交互场景？",
      okText:"确定",
      cancelText:"取消",
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    // const res = await formRemove({id})
    // message.info(res.message)
    this.getList()
  }

  doSearchByPage = (current,size) => {
    let { queryData } = this.state;
    queryData.current = current
    queryData.size = size
    this.setState({
      queryData
    },() => {
      this.getList()
    })
  }

  onSearch = value => {
    let { queryData } = this.state;
    queryData.search = value;
    this.setState({
      queryData
    },() => {
      this.doSearchByPage(1,queryData.size)
    })
  }

  render(){
    const { queryData,list,loading,total } = this.state;
    const columns = [
      {
        title:"序号",
        dataIndex:"index",
        width:100,
        render:(text,row,index) => {
          return (queryData.current - 1) * queryData.size + (index + 1)
        }
      },
      {
        title:"场景名称",
        dataIndex:"name",
        width:200,
        render:(name,row) => {
          return (
            <div>
              <span>{name}</span>
              <Icon type="form" style={{marginLeft:10,cursor:"pointer"}} onClick={() => this.openCreateModal(row)} />
            </div>
          )
        }
      },
      {
        title:"场景描述",
        dataIndex:"desc",
        width:200,
      },
      {
        title:"创建人",
        dataIndex:"createUser",
        width:200,
      },
      {
        title:"创建时间",
        dataIndex:"createTime",
        width:200,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:"操作",
        width:200,
        render:(text,row,index) => {
          return (
            <div>
            <Button type="primary" size="small" icon="edit" style={{marginRight:5}} onClick={() => this.toEditPage(row)}>编辑</Button>
            <Button type="danger" size="small" icon="delete" onClick={() => this.removeConfirm(row.id)}>删除</Button>
            </div>
          )
        }
      },
    ]
    return(
      <div style={{padding:15}}>
        <div className={styles.top}>
          <Input.Search placeholder="请输入场景名称/场景描述" style={{width:300}} onSearch={this.onSearch} />
          <Button type="primary" onClick={() => this.openCreateModal()}>创建表单交互</Button>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={"id"}
          scroll={{x:"auto"}}
          pagination={{
            total,
            current:queryData.current,
            pageSize:queryData.size,
            showQuickJumper:true,
            showSizeChanger:true,
            onShowSizeChange:this.doSearchByPage,
            onChange:this.doSearchByPage
          }}
        />

        <CreateModal onRef={ref => this.CreateModal = ref} />
      </div>
    )
  }
}

export default FormInteraction